<template>
  <!-- 渲染日程添加对话框和全部日程对话框 -->
  <app-dialog v-model="dialogVisible" :width="460">
    <!-- 日程表单，包含标题、时间和地点输入框 -->
    <div class="schedule-form">
      <!-- 输入日程标题 -->
      <input v-model="newSchedule.title" placeholder="日程标题" />
      <!-- 时间选择器，包含开始时间和结束时间 -->
      <div class="time-pickers">
        <input type="datetime-local" v-model="newSchedule.startTime" />
        <input type="datetime-local" v-model="newSchedule.endTime" />
      </div>
      <!-- 输入日程地点 -->
      <input v-model="newSchedule.location" placeholder="地点" />
    </div>
    <!-- 按钮组，包含添加日程、查看全部日程和关闭按钮 -->
    <div class="button-group">
      <button @click="addSchedule" class="primary-button">添加日程</button>
      <button @click="showAllScheduleDialog = true" class="primary-button">全部日程</button>
      <button @click="dialogVisible = false">关闭</button>
    </div>
  </app-dialog>

  <!-- 渲染全部日程对话框 -->
  <ScheduleAllListDialog v-model="showAllScheduleDialog" />
</template>

<script lang="ts" setup>
// 从 Vue 导入响应式 API 和计算属性
import { ref, computed, type ComputedRef } from 'vue';
// 导入日程实体类型
import type Schedule from '@/entity/Schedule';
// 导入日程状态管理 store
import { useScheduleStore } from '@/stores/scheduleStore';
// 导入自定义对话框组件
import AppDialog from './app-dialog.vue';
// 导入全部日程对话框组件
import ScheduleAllListDialog from './schedule-all-list-dialog.vue'

// 定义组件属性，接收对话框显示状态
const props = defineProps<{ modelValue: boolean }>();
// 定义组件事件，用于更新对话框显示状态
const emit = defineEmits(['update:modelValue']);

// 定义计算属性，用于双向绑定对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
});

// 定义空日程对象
const emptySchedule: Schedule = { id: 0, title: '', startTime: '', endTime: '', location: '' };
// 初始化日程状态管理 store
const scheduleStore = useScheduleStore();
// 定义响应式变量，用于存储新日程信息
const newSchedule = ref<Schedule>({ ...emptySchedule });

// 定义计算属性，获取所有日程列表
const scheduleList: ComputedRef<Schedule[]> = computed(() => scheduleStore.scheduleList);

/**
 * 添加新日程的方法
 * 校验输入参数的完整性和时间的有效性
 * 如果校验通过，则调用 store 的方法添加日程
 */
const addSchedule = async (): Promise<void> => {
  // 校验参数完整性，如果有任何字段为空，则弹出提示框
  if (!newSchedule.value.title || !newSchedule.value.startTime || !newSchedule.value.endTime || !newSchedule.value.location) {
    window.alert('请填写完整信息');
    return;
  }

  // 校验时间正确性，结束时间必须大于开始时间，且不能小于当前时间
  const startTime = new Date(newSchedule.value.startTime);
  const endTime = new Date(newSchedule.value.endTime);
  const currentTime = new Date();
  if (endTime <= startTime || endTime <= currentTime) {
    window.alert('时间设置有误，结束时间必须大于开始时间，且不能小于当前时间');
    return;
  }

  // 调用 store 的方法添加日程
  scheduleStore.addSchedule(newSchedule.value);
  // 重置新日程信息为初始状态
  newSchedule.value = { ...emptySchedule };
};

// 定义响应式变量，用于控制全部日程对话框的显示状态
const showAllScheduleDialog = ref<boolean>(false);
</script>

<style lang="scss" scoped>
// 日程表单样式，使用垂直布局，元素之间有 10px 的间距
.schedule-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;

  input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  // 时间选择器样式，使用水平布局，元素之间有 10px 的间距
  .time-pickers {
    display: flex;
    gap: 10px;

    input {
      flex: 1;
    }
  }
}

// 按钮组样式，使用垂直布局，元素之间有 10px 的间距
.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;

  button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      opacity: 0.9;
    }

    // 主要按钮样式，蓝色背景，白色文字
    &.primary-button {
      background-color: #007bff;
      color: white;
    }
  }
}
</style>